<template>
  <div>
    <van-nav-bar left-arrow @click-left="onClickLeft" title="商品列表" />
    <div class="box">
      <van-search placeholder="请输入搜索关键词" />
      <!-- 一级分类 -->
      <van-tabs>
        <van-tab v-for="(item, index) in firstCate" :key="index" :title="item">
        </van-tab>
      </van-tabs>
    </div>

    <!-- 某个类别下的商品数据：下拉刷新  Vant列表  -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        offset="10"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-card
        @click="goodsDetail(item.id)"
          :key="item.id"
          v-for="item in goodsArr"
          tag="标签"
          :price="item.price"
          :title="item.goodsname"
          :thumb="$imgHost + item.img"
          :origin-price="item.market_price"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getSecondCateGoods,checktoken } from "../request/api.js";
export default {
  data() {
    return {
      firstCate: ["综合排序", "销量", "价格", "好评度", "店铺", "筛选"],
      goodsArr: [],
      type: "", //类别:1为一级商品类别  2为二级商品类别
      cateid: "", //类别id
      page: 1, //第几页
      size: 6, //每页显示的条数
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  mounted() {
    //接参：
    let { cid = "", tid = "" } = this.$route.query;
    this.cateid = cid;
    this.type = tid;
    this.goodsList();
    //验证token是否有效
    checktoken()
      .then((d) => {
        if (d.data.code != 200) {
          this.$toast({
            message: d.data.msg,
            icon: "warning-o",
          });
        }
      })
      .catch((e) => {
        console.log(e);
      });
  },
  methods: {
    goodsDetail(id){
      this.$router.push('/goodsdetail/'+id)
      console.log(id);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    goodsList() {
      //查询某个二级类别下的商品数据
      let { cateid, type, page, size } = this;
      let params = { cateid, type, page, size };
      getSecondCateGoods(params).then((d) => {
        if (d.data.list.goodData == null) {
          //没有数据
          this.finished = true; //数据加载完成后不再触发load事件
        } else {
          this.goodsArr = this.goodsArr.concat(d.data.list.goodData);
        }
      });
      //关闭上拉
      this.loading = false;
      //关闭下拉
      this.refreshing = false;
    },
    onRefresh() {
      //向下刷新
      setTimeout(() => {
        this.finished = false; //开启上拉加载更多数据
        this.goodsArr = [];
        this.page = 1;
        this.goodsList();
      }, 1000);
    },
    onLoad() {
      //上拉刷新
      setTimeout(() => {
        this.page++; //改变页数
        this.goodsList();
      }, 1000);
    },
    
  },
};
</script>

<style scoped>
::v-deep .van-nav-bar__content {
  position: fixed;
  background-color: #ff6041;
  top: 0;
  left: 0;
  width: 100vw;
}
::v-deep .van-nav-bar__title,
::v-deep .van-icon-arrow-left:before {
  color: white;
  font-weight: bold;
}
.top_cate {
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top: 46px;
  padding-bottom: 20px;
  background-color: #ff6041;
}
.van-search {
  height: 40px;
  margin-left: 14px;
  width: 93vw;
  border-radius: 8px;
}
.van-hairline--bottom::after {
  border-bottom-width: 0px;
}
::v-deep .van-nav-bar__title {
  color: white;
  font-weight: bold;
}
::v-deep .van-tabs__nav--line.van-tabs__nav--complete {
  background-color: transparent;
}
.box {
  /* background-color: #ff6041; */
  background-image: linear-gradient(to bottom, #ff6345, #ff887d);
  margin-top: 46px;
}
.box img {
  width: 120px;
  margin-left: 27px;
  margin-right: 20px;
}
::v-deep .van-search {
  padding: 0;
  display: inline-block;
  border-radius: 10px;
}
::v-deep .van-search__content {
  border-radius: 5px;
  width: 150px;
}
::v-deep .van-tabs__nav--line {
  background-color: transparent;
}
::v-deep .van-tabs__nav--card .van-tab.van-tab--active {
  background-color: #ff8917;
}
::v-deep .van-tab {
  color: white;
  font-weight: bold;
}
::v-deep .van-tabs__line {
  display: none;
}
</style>